<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layout">
<head>
    <title>Messages : View</title>
</head>
<body>
<h4 layout:fragment="header">Messages : Create</h4>
<div layout:fragment="content" class="content">
    <!-- Main charts -->
    <div class="row">
        <div class="col-lg-12">

            <!-- Traffic sources -->
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title"><a href="form.html" th:href="@{/(form)}">Create Message</a></h6>
                    <div class="heading-elements">
                        <form class="heading-form" action="#">
                            <div class="form-group">
                                <label class="checkbox-inline checkbox-switchery checkbox-right switchery-xs">
                                    <input type="checkbox" class="switch" checked="checked"/>
                                    Live update:
                                </label>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-4">
                            <ul class="list-inline text-center">
                                <li>
                                    <a href="#"
                                       class="btn border-teal text-teal btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i
                                            class="icon-plus3"></i></a>
                                </li>
                                <li class="text-left">
                                    <div class="text-semibold">New visitors</div>
                                    <div class="text-muted">2,349 avg</div>
                                </li>
                            </ul>

                            <div class="col-lg-10 col-lg-offset-1">
                                <div class="content-group" id="new-visitors"></div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <ul class="list-inline text-center">
                                <li>
                                    <a href="#"
                                       class="btn border-warning-400 text-warning-400 btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i
                                            class="icon-watch2"></i></a>
                                </li>
                                <li class="text-left">
                                    <div class="text-semibold">New sessions</div>
                                    <div class="text-muted">08:20 avg</div>
                                </li>
                            </ul>

                            <div class="col-lg-10 col-lg-offset-1">
                                <div class="content-group" id="new-sessions"></div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <ul class="list-inline text-center">
                                <li>
                                    <a href="#"
                                       class="btn border-indigo-400 text-indigo-400 btn-flat btn-rounded btn-icon btn-xs valign-text-bottom"><i
                                            class="icon-people"></i></a>
                                </li>
                                <li class="text-left">
                                    <div class="text-semibold">Total online</div>
                                    <div class="text-muted"><span
                                            class="status-mark border-success position-left"></span> 5,378 avg
                                    </div>
                                </li>
                            </ul>

                            <div class="col-lg-10 col-lg-offset-1">
                                <div class="content-group" id="total-online"></div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <td>ID</td>
                            <td>Created</td>
                            <td>Summary</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:if="${messages.empty}">
                            <td colspan="3">No messages</td>
                        </tr>
                        <tr th:each="message : ${messages}">
                            <td th:text="${message.id}">1</td>
                            <td th:text="${#calendars.format(message.created)}">July 11,
                                2012 2:17:16 PM CDT
                            </td>
                            <td><a href="view.html" th:href="@{'/' + ${message.id}}"
                                   th:text="${message.summary}"> The summary </a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="position-relative" id="traffic-sources"></div>

                <!-- /traffic sources -->

            </div>


        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-flat">
                    <!-- Traffic sources -->
                    <div class="pull-right">
                        <a href="form.html" th:href="@{/(form)}">Create Message</a>
                    </div>

                    <!-- /traffic sources -->
                </div>
            </div>


        </div>
        <!-- /main charts -->


        <!-- Dashboard content -->

        <!-- /dashboard content -->


        <!-- Footer -->
        <div class="footer text-muted">
            &copy; 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov"
                                                                     target="_blank">Eugene Kopyov</a>
        </div>
        <!-- /footer -->

    </div>
</div>
</body>
</html>
